<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/zbx/login.css">
    <link rel="stylesheet" href="./css/zbx/reset..css">
    <link rel="stylesheet" href="../zbx/zhuce.html">

</head>

<body>
    <div data-v-3488bcba="" data-v-90732428="" class="auth-modal-box">
        <form data-v-3488bcba="" class="auth-form">
            <div data-v-3488bcba="" class="panfish">
                <img data-v-3488bcba="" src="./img/zbx/normal.0447fe9.png" class="normal" style="">
                <img data-v-3488bcba="" src="./img/zbx/greeting.1415c1c.png" class="greeting" style="display: none;">
                <img data-v-3488bcba="" src="./img/zbx/blindfold.58ce423.png" class="blindfold" style="display: none;">
            </div>
            <i data-v-3488bcba="" title="关闭" class="close-btn ion-close-round"></i>
            <div data-v-3488bcba="" class="panel">
                <h1 data-v-3488bcba="" class="title">登录</h1>
                <!---->
                <div data-v-3488bcba="" class="input-group">
                    <div data-v-3488bcba="" class="input-box">
                        <input data-v-3488bcba="" name="zhu_phonum" maxlength="64" placeholder="请输入手机号或邮箱"
                            class="input">
                    </div>
                    <div data-v-3488bcba="" class="input-box">
                        <input data-v-3488bcba="" name="zhu_password" type="password" maxlength="64" placeholder="请输入密码"
                            class="input">
                    </div>
                </div>
                <button data-v-3488bcba="" class="btn" type="button">登录</button>
                <div data-v-3488bcba="" class="prompt-box">没有账号？
                    <a href="/zhuce"> <span data-v-3488bcba="" class="clickable" id="zhuce">注册</span></a>
                    <a data-v-3488bcba="" href="/reset-password" class="right clickable">忘记密码</a>
                </div>
            </div>
            <div data-v-3488bcba="" class="oauth-box">
                <div data-v-3488bcba="" class="hint">第三方账号登录：</div>
                <div data-v-3488bcba="" class="oauth">
                    <div data-v-3488bcba="" class="oauth-bg">
                        <img data-v-3488bcba="" title="微博" alt="微博" src="./img/zbx/weibo.0cd39f5.png" class="oauth-btn">
                    </div>
                    <div data-v-3488bcba="" class="oauth-bg">
                        <img data-v-3488bcba="" title="微信" alt="微信" src="./img/zbx/wechat.ce329e6.png"
                            class="oauth-btn">
                    </div>
                    <div data-v-3488bcba="" class="oauth-bg">
                        <img data-v-3488bcba="" title="GitHub" alt="GitHub" src="./img/zbx/github.547dd8a.svg"
                            class="oauth-btn">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- 广告 -->

    <div data-v-6e4d029a="" data-v-90732428="" class="recommend-box">
        <div data-v-6e4d029a="" class="extension">
            <div data-v-6e4d029a="" data-growing-container="true" data-growing-title="掘金插件" class="link">
                <div data-v-6e4d029a="" class="title" 掘金浏览器插件 - 下载插件，送你 <span data-v-6e4d029a="" class="price">
                    45元</span>
                    买小册</div>
            </div>
            <div data-v-6e4d029a="" class="ion-close">
            </div>
        </div>
    </div>


    <!-- =========== -->

    <!-- <script src="./js/zbx/login.js"></script> -->
    <script src="./lib/jqurey/jquery.min.js"></script>
    <script>
        $('.auth-form').on('click', '.btn', function () {
            // console.log(232);
            let datastr = $('form').serialize();
            console.log(datastr);
            $.ajax({
                type: 'post',
                url: '/reset',
                data: datastr,
                success: function (data) {
                    // console.log(data);
                    if (data.code == '1002') {
                        alert(data.message);
                        // return;
                    } if (data.code == '1003') {
                        alert(data.message)
                        location.href = '/'
                    }
                }
            })

        })




        /* tab切换函数（点击元素类名，切换类名，事件类型，回调函数）  包括 回调函数（被点击的元素，点击元素的索引）*/
        (function () {
            /**
           * 
           * @param {'点击的元素类名'} clickClass 
           * @param {'需要切换的类名'} toggleClass 
           * @param {'事件类型'} eventType 
           * @param {'回调函数'} fn 
           */
            function $_tab(clickClass, toggleClass, eventType, fn) {
                // 获取的点击元素
                const clickEle = document.querySelectorAll(clickClass);
                // 给所有元素添加点击事件
                for (let i = 0; i < clickEle.length; i++) {
                    clickEle[i].addEventListener(eventType, function () {
                        if (toggleClass != null) {
                            // 让有类名的移除
                            if (document.querySelector(clickClass + '.' + toggleClass)) {
                                document.querySelector(clickClass + '.' + toggleClass).classList.remove(toggleClass);
                            }
                            // 给点击的元素加上类名
                            this.classList.add(toggleClass);
                        };
                        // 如果有回调函数就调用
                        if (fn) {
                            fn(this, i);
                        }
                    })
                }
            }
            // 暴露
            window.$_tab = $_tab;
        }());

        $('.auth-form').on('click', '.btn', function () {.0
            // console.log(232);
            let datastr = $('form').serialize();
            $.ajax({
                type: 'post',
                url: '/reset',
                data: datastr,
                success: function (data) {
                    // console.log(data);
                    if (data.code == '1002') {
                        alert(data.message);
                        // return;
                    } if (data.code == '1003') {
                        alert(data.message)
                        location.href = '/'
                    }
                }
            })

        })
        // console.log($('.input-group input').focus(function(){console.log(5)}));
        $_tab('.input-group input', null, 'focus', function (ele, index) {
            $('.panfish>img').css('display', 'none');
            document.querySelectorAll('.panfish>img')[index + 1].style.display = 'block';
        });
        $('.panel .btn').click(function () {
            $('.panfish>img').css('display', 'none');
            document.querySelectorAll('.panfish>img')[0].style.display = 'block';

            //     <div class="alert-list">

            //     <div class="alert">请填写手机号</div>

            // </div>
            let inputs = document.querySelectorAll('.input-group input');
            if (inputs[0].value == '') {
                createAlert('请输入手机号或邮箱');
            } else if (inputs[1].value == '') {
                createAlert('请输入密码');
            } else if (!(/^1{1}\d{10}$/.test(inputs[0].value)) && inputs[0].value.length < 11) {
                createAlert('手机号格式错误');
            } else if (!(/^.+@{1}.+\.{1}.{2,5}/.test(inputs[0].value))) {
                createAlert('邮箱格式错误');
            } else if (!(inputs[1].value.length >= 6)) {
                createAlert('密码错误');
            }
            function createAlert(textContent) {
                let oDiv = document.createElement('div');
                oDiv.className = 'alert';
                oDiv.innerHTML = textContent;
                oDiv.time = setTimeout(function () {
                    document.querySelector('.alert-list').removeChild(oDiv);
                }, 2000);
                document.querySelector('.alert-list').appendChild(oDiv);
            }
            inputs[0].focus();
        });
        $('.input-group input').blur(function () {
            $('.panfish>img').css('display', 'none');
            document.querySelectorAll('.panfish>img')[0].style.display = 'block';
        });



    </script>
</body>

</html>